import React, { useState } from 'react';
import type { MenuProps } from 'antd';
import { Dropdown, Space, Avatar, message, Modal, Button } from 'antd';
import { useNavigate } from 'react-router-dom';

const AvatarDropDown: React.FC = () => {

    const [modelTitle, setMmodelTitle] = useState<string>('是否前往大屏展示总览页面？')

    const navigate = useNavigate();

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [confirmLoading, setConfirmLoading] = useState(false);
    const showModal = (todo: string) => {
        if(todo === 'visual') {
            setMmodelTitle('是否前往大屏展示总览页面？')
        }
        if(todo === 'login') {
            setMmodelTitle('确定退出登录吗？')
        }
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setConfirmLoading(true);
        setTimeout(() => {
            setIsModalOpen(false);
            setConfirmLoading(false);
            if(modelTitle === '是否前往大屏展示总览页面？') { 
                navigate('/VisualBSP'); 
            }
            if(modelTitle === '确定退出登录吗？') { 
                navigate('/'); 
                message.success('退出成功');
            }
        }, 800);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const items: MenuProps['items'] = [
        {
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
            用户中心
            </a>
        ),
        key: '0',
        },
        {
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
            系统设置
            </a>
        ),
        key: '1',
        },
        {
        label: (
            <span onClick={ () => showModal('visual') }>大屏总览</span>
        ),
        key: '2',
        },
        {
        type: 'divider',
        },
        {
        label: (
            <span onClick={ () => showModal('login') }>退出登录</span>
        ),
        key: '3',
        },
    ];

    return (
        <>
        <Dropdown menu={{ items }} placement="bottomRight" arrow>
            <a onClick={(e) => e.preventDefault()}>
            <Space>
                <Avatar size="large" src={'/imgs/avatar.jpg'}></Avatar>
            </Space>
            </a>
        </Dropdown>

        <Modal
            title={ modelTitle }
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            confirmLoading={confirmLoading}
            onOk={handleOk}
            onCancel={handleCancel}
            footer={[
            <Button key="back" onClick={handleCancel}>
                取 消
            </Button>,
            <Button key="submit" type="primary" loading={confirmLoading} onClick={handleOk}>
                确 认
            </Button>,
            ]}
        >
        </Modal>
        </>
    )
} ;

export default AvatarDropDown;